<template>
	<view class="content">
		<image src="@/static/login.jpg" style="width: 100%;"></image>
		<view class="form-control" v-show="show">
			<u--form labelPosition="left" :model="formData" ref="uForm">
				<view class="input">
					<image src="@/static/user.png"
						style="height: 50rpx; width: 50rpx;margin-left: 30rpx;margin-right: 30rpx;">
					</image>
					<u-form-item borderBottom ref="item1">
						<u--input v-model="formData.username" border="none" placeholder="账号"></u--input>
					</u-form-item>
				</view>
				<view class="input">
					<image src="@/static/pwd.png"
						style="height: 50rpx; width: 50rpx;margin-left: 30rpx;margin-right: 30rpx;">
					</image>
					<u-form-item borderBottom ref="item1">
						<u--input v-model="formData.password" border="none" placeholder="密码" type="password"></u--input>
					</u-form-item>
				</view>
			</u--form>
		</view>

		<view class="form-control" v-show="!show">
			<u--form labelPosition="left" :model="formData1" ref="uForm">
				<view class="input">
					<image src="@/static/phone.jpg"
						style="height: 50rpx; width: 50rpx;margin-left: 30rpx;margin-right: 30rpx;">
					</image>
					<u-form-item borderBottom ref="item1">
						<u--input v-model="formData1.phone" border="none" placeholder="手机号"></u--input>
					</u-form-item>
				</view>
				<view class="input">
					<image src="@/static/pwd.png"
						style="height: 50rpx; width: 50rpx;margin-left: 30rpx;margin-right: 30rpx;">
					</image>
					<u-form-item borderBottom ref="item1">
						<u--input v-model="formData1.password" border="none" placeholder="密码"
							type="password"></u--input>
					</u-form-item>
				</view>
			</u--form>
		</view>

		<view class="bottom">
			<view class="login" @click="Loginbtn('uForm')">登录</view>
		</view>
		<view class="agreeInfo" style="margin-bottom: 40rpx;color: skyblue;" @click="goRegister">
			<label style="font-size: 28rpx;"> 没有账号?去注册</label>
		</view>
		<view class="agreeInfo" style="margin-bottom: 40rpx;color: skyblue;" @click="show=!show">
			<label style="font-size: 28rpx;" v-show="!show"> 使用账号登录</label>
			<label style="font-size: 28rpx;" v-show="show"> 使用手机号登录</label>
		</view>
		<view class="agreeInfo" style="margin-bottom: 20rpx;" v-show="show">
			<checkbox @click="check1" :checked='show1'></checkbox>
			<label style="font-size: 28rpx;">是否记住账号密码</label>
		</view>
		<view class="agreeInfo" style="margin-bottom: 20rpx;" v-show="!show">
			<checkbox @click="check2" :checked='show2'></checkbox>
			<label style="font-size: 28rpx;">是否记手机号密码</label>
		</view>

	</view>
</template>

<script>
	import {
		login
	} from "@/ww.js"
	import {
		formatDate
	} from "tough-cookie";
	import {
		log
	} from "util";
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				formData1: {
					phone: '',
					password: ''
				},
				show: true,
				show1: false,
				show2: false,
			}
		},
		onLoad() {
			uni.removeStorage({
				key: 'jump'
			})
			//取出缓存中的账号、密码
			const HBusername = new Buffer(uni.getStorageSync("HBusername"), 'base64').toString('utf8');
			const HBphone = new Buffer(uni.getStorageSync("HBphone"), 'base64').toString('utf8');
			const HBpassword = new Buffer(uni.getStorageSync("HBpassword"), 'base64').toString('utf8');
			const HBpassword1 = new Buffer(uni.getStorageSync("HBpassword1"), 'base64').toString('utf8');
			const HBshow = uni.getStorageSync("HBshow");
			const HBshow1 = uni.getStorageSync("HBshow1");
			const checkboxshow = uni.getStorageSync("checkboxshow");
			this.show = checkboxshow
			if (HBusername && HBpassword && HBshow) {
				this.formData.username = HBusername;
				this.formData.password = HBpassword;
				this.show1 = HBshow
			}
			if (HBphone && HBpassword1 && HBshow1) {
				this.formData1.phone = HBphone;
				this.formData1.password = HBpassword1;
				this.show2 = HBshow1
			}
		},
		methods: {
			async Loginbtn(ref) {
				let that = this
				if (this.show == true) {
					this.formData.loginType = 0
					const data = await login(this.formData)
					if (data.code == 200) {
						uni.showToast({
							title: `登录成功`
						})
					} else {
						return
					}
					uni.setStorage({ //存入Storage
							key: 'userInfo', //自己取个名字
							data: { //存的数据可以是很多条
								'username': data.data.info.username
							},
							success: () => {
								setTimeout(() => {
									uni.reLaunch({
										url: "/pages/mine/mine",
									})
									// 如果勾选了记住账号密码就保存账号密码到缓存中
									if (this.show1) {
										this.formData.username = new Buffer(this.formData.username)
											.toString('base64')
										this.formData.password = new Buffer(this.formData.password)
											.toString('base64')
										uni.setStorageSync("HBusername", this.formData.username);
										uni.setStorageSync("HBpassword", this.formData.password);
										uni.setStorageSync("HBshow", this.show1);
										uni.setStorageSync("checkboxshow", this.show);

										uni.removeStorageSync("HBphone");
										uni.removeStorageSync("HBpassword1");
										uni.removeStorageSync("HBshow1");
										uni.removeStorageSync("checkboxshow1");
									} else {
										// 销毁缓存中的账号、密码
										uni.removeStorageSync("HBusername");
										uni.removeStorageSync("HBpassword");
										uni.removeStorageSync("HBshow");
										uni.removeStorageSync("checkboxshow");
									}
								}, 500)
							}
						}),
						uni.setStorage({
							key: 'token',
							data: {
								'token': data.data.token,
							}
						})

				} else {
					this.formData1.loginType = 1
					const data = await login(this.formData1)
					if (data.code == 200) {
						uni.showToast({
							title: `登录成功`
						})
					} else {
						return
					}
					uni.setStorage({ //存入Storage
							key: 'userInfo', //自己取个名字
							data: { //存的数据可以是很多条
								'username': data.data.info.username
							},
							success: () => {
								setTimeout(() => {
									uni.reLaunch({
										url: "/pages/mine/mine",
									})
									// 如果勾选了记住账号密码就保存账号密码到缓存中
									if (this.show2) {
										this.formData1.phone = new Buffer(this.formData1.phone)
											.toString('base64')
										this.formData1.password = new Buffer(this.formData1
											.password).toString('base64')
										uni.setStorageSync("HBphone", this.formData1.phone);
										uni.setStorageSync("HBpassword1", this.formData1.password);
										uni.setStorageSync("HBshow1", this.show2);
										uni.setStorageSync("checkboxshow1", this.show);

										uni.removeStorageSync("HBusername");
										uni.removeStorageSync("HBpassword");
										uni.removeStorageSync("HBshow");
										uni.removeStorageSync("checkboxshow");
									} else {
										// 销毁缓存中的账号、密码
										uni.removeStorageSync("HBphone");
										uni.removeStorageSync("HBpassword1");
										uni.removeStorageSync("HBshow1");
										uni.removeStorageSync("checkboxshow1");
									}
								}, 500)
							}
						}),
						uni.setStorage({
							key: 'token',
							data: {
								'token': data.data.token,
							}
						})
				}
			},
			check1() {
				this.show1 = !this.show1
			},
			check2() {
				this.show2 = !this.show2
			},
			goRegister() {
				uni.navigateTo({
					url: "/pages/login/register"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
		width: 100%;
		height: 100vh;
		// height: 100%;

		.form-control {
			margin-top: 100rpx;
		}

		/deep/ .uni-forms-item {

			width: 90vw;
			margin-left: 5vw;
			border-bottom: 1rpx solid gainsboro;
			font-size: 30rpx;

			.uni-input {
				display: inline-block;
				width: 80%;
				height: 100%;
				padding-left: 4vw;
			}
		}

		.bottom {
			width: 90vw;
			margin-left: 5vw;
			margin-bottom: 30rpx;

			.login {
				width: 100%;
				margin-top: 40rpx;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 20rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				background-color: #359cff;
			}

		}

		.agreeInfo {
			font-size: 24rpx;
			width: 90vw;
			margin-left: 6vw;
		}

		a {
			text-decoration: none;
		}

		::v-deep .uni-checkbox-input {
			width: 30rpx;
			height: 30rpx;
			margin-bottom: 10rpx;
		}
	}

	.input {
		display: flex;
		align-items: center;
	}

	/deep/ .u-form-item__body {
		width: 80vw;
	}
</style>